<template>
  <swiper class="swiper" :options="swiperOption">
    <swiper-slide class="swiper-slide" v-for="(item, index) in banners" :key="index">
      <a :href="item.link" >
        <img :src="item.image" alt="" @load="imageLoad">
      </a>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

//Swiper配置
const swiperOption = {
  initialSlide :1,
  spaceBetween: 30,
  centeredSlides: true,
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  },
  autoplay: {
    delay: 2500,
    disableOnInteraction: false
  }
}

export default {
  name: 'MainSwiper',
  components: {
    Swiper,
    SwiperSlide
  },
  props: {
      banners: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      swiperOption,
      isLoad: false
    }
  },
  methods: {
    imageLoad() {
      if (!this.isLoad) {//确保只发送一次load请求，提高性能
        this.$emit('imageLoad');
        this.isLoad = true;
      }
    }
  }
}
</script>

<style scoped>
  .swiper-slide {
    width: 100%;
  }
  .swiper-slide img {
    height: 100%;
    width: 100%;
  }
  .swiper {
    --swiper-pagination-color: var(--color-high-text); /* 两种都可以 */
  }
</style>